Ext.ns('App.View');

App.View.CounterEdit = Ext.extend(Ext.Panel, {

	// privat
	initComponent: function() {
        
		var calculateDesiredWidth = function() {
		    var viewWidth = Ext.Element.getViewportWidth(),
		        desiredWidth = Math.min(viewWidth, 400) - 10;
		    return desiredWidth;
		};
		
        var secondsToTime = function(data) {
			var secs       = parseInt(data, 10);						
			var hours      = Math.floor(secs / (60 * 60));
			var minutes    = Math.floor(secs % (60 * 60) / 60);
			var seconds    = Math.ceil(secs % (60 * 60) % 60);
		    var returnTime = {
		    	"hours"   : hours   < 10 ? "0" + hours   : hours,
		    	"minutes" : minutes < 10 ? "0" + minutes : minutes,
		    	"seconds" : seconds < 10 ? "0" + seconds : seconds
		    };
			return returnTime;
		};
        
		var config = {
		
            floating         : true,
            modal            : true,
            centered         : true,
            styleHtmlContent : true,
            cls              : 'CounterEdit',
            width            : calculateDesiredWidth(),
            
            dockedItems: [{
                dock: 'top',
		        xtype: 'toolbar',
                title: 'Edit counter',
				items  : [{
			    	text    : 'Cancel',
		            handler : this.onTapButtonActionOverlay
			    },{
			    	xtype   : 'spacer'
                },{
			    	text    : 'Save',
			    	ui      : 'confirm',
			        handler : this.onTapButtonActionOverlay
                }]
            }],
            
            items     : [{
				id    : 'counterForm',
				xtype : 'form',
				items : [{
                    xtype        : 'textfield',
                    name         : 'counterGroup',
                    label        : 'Group',
	                placeHolder  : 'Middle ...',
	                value        : this.counterGroup,
	                required     : true,
	                useClearIcon : true
                }, {
	                xtype        : 'textfield',
	                name         : 'counterName',
	                label        : 'Name',
	                placeHolder  : 'Own PU ...',
	                value        : this.counterName,
	                required     : true,
	                useClearIcon : true
                }, {
                    xtype        : 'urlfield',
                    name         : 'counterGfx',
                    label        : 'Graphic',
                    placeHolder  : '../pu-regen.png',
	                value        : this.counterGfx,
	                required     : true,
                    useClearIcon : true
                }, {
                    xtype        : 'spinnerfield',
                    name         : 'counterMinute',
                    label        : 'Minute',
	                required     : true,
	                value        : secondsToTime(this.counterDuration).minutes,
                    minValue     : 00,
                    maxValue     : 60
                }, {
                    xtype        : 'spinnerfield',
                    name         : 'counterSecond',
                    label        : 'Second',
	                required     : true,
	                value        : secondsToTime(this.counterDuration).seconds,
                    minValue     : 00,
                    maxValue     : 60
                }, {
                    xtype        : 'hiddenfield',
                    name         : 'id',
	                required     : true,
                    value        : this.id
		        }]
            }]
		};
		
		Ext.apply(this, config);
		App.View.CounterEdit.superclass.initComponent.call(this);
		
	},
	
	onTapButtonActionOverlay: function(button, event) {
		console.log("Clicked BTN was: %o %o", button.text, button);
		switch (button.text) {
			case 'Cancel':
				//TODO: Find better solution for ownerCt
				this.ownerCt.ownerCt.hide();
				break;
			case 'Save':
				//TODO: Find better solution for ownerCt
            	this.ownerCt.ownerCt.hide();
	        	Ext.Msg.alert('Changing Entry', 'Modification isn\'t implemented jet', Ext.emptyFn);
				break;
		}
	}
    
});

Ext.reg('App.View.CounterEdit', App.View.CounterEdit);
